<template>
  <view id="card">
    <!-- 头部 -->

    <view class="header" :style="headerStyle">
      <view :style="'height: ' + statusBarHeight"> </view>
      <view class="header-info">
        <view class="title" :style="headerTextStyle">
          <view class="navleft">
            <image src="../../static/index/gpsBlack.png" mode="" class="navleft-img"></image>
            <view class="navposition" :style="headerdingwei" @tap="get_Location()">
              {{CityName}}
            </view>
          </view>
          <view class="navcent" @click="topsearch()">
            <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
          </view>
          <view class="navright">
            <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
            <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- 第一个swiper -->
    <view style="height: 180rpx;">

    </view>
    <view class="swiper-one">
      <u-swiper imgMode="widthFix" :list="list1" indicator indicatorMode="line" circular height="340rpx" interval='2000'
        class="swiper-one-con"></u-swiper>
    </view>
    <!-- 第一个swiper -->
    <!-- 第二个swiper -->
    <view class="swiper-two">
      <u-swiper imgMode="heightFix" :list="list2" indicator indicatorMode="line" circular height="150rpx"
        interval='3500' ass="swiper-two-con"></u-swiper>
    </view>
    <!-- 第二个swiper -->
    <!-- 宫格 -->
    <view class="grid">
      <u-grid :border="false" col="5">
        <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
          <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="26"></u-icon>
          <text class="grid-text">{{listItem.title}}</text>
        </u-grid-item>
      </u-grid>
      <!-- <u-toast ref="uToast" /> -->
    </view>
    <!-- 宫格 -->
    <!-- 优惠活动 -->
    <view class="preferential">
      <view class="preferential-top">
        <view class="preferential-title">
          优惠活动
        </view>
        <view class="preferential-more">
          更多
        </view>
      </view>
      <view class="preferential-con">
        <view class="preferential-left">
          <u-swiper imgMode="widthFix" :list="list3" indicator indicatorMode="line" circular height="300rpx"
            class="swiper-one-con"></u-swiper>
        </view>
        <view class="preferential-right">
          <view class="recommend">
            <image src="../../static/card/discounts_01.png" mode="" class="img"></image>
          </view>
          <view class="dragon">
            <image src="../../static/card/discounts_02.png" mode="" class="img"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 优惠活动 -->
    <!-- 增值礼遇 -->
    <view class="appreciation">
      <view class="preferential-top">
        <view class="preferential-title">
          增值礼遇
        </view>
        <view class="preferential-more">
          更多
        </view>
      </view>
      <view class="appreciation-con">
        <view class="appreciation-swiper">
          <u-swiper imgMode="widthFix" :list="list4" indicator indicatorMode="line" circular height="150rpx"
            interval='1500' class="swiper-one-con"></u-swiper>
        </view>
        <view class="appreciation-flex">
          <view class="appreciation-flex-con">
            <view class="aa">
              <image src="../../static/card/tea.png" class="image"></image>
            </view>
            <view class="text">
              爱咖啡礼遇
            </view>
          </view>
          <view class="appreciation-flex-con">
            <view class="aa">
              <image src="../../static/card/doll.png" class="image"></image>
            </view>
            <view class="text">
              储蓄罐换购
            </view>
          </view>
          <view class="appreciation-flex-con">
            <view class="aa">
              <image src="../../static/card/value_last.png" class="image"></image>
            </view>
            <view class="text">
              福利月月享
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 增值礼遇 -->
    <!-- 用卡精选 -->
    <view class="Selection">
      <view class="preferential-top">
        <view class="preferential-title">
          用卡精选
        </view>
        <view class="preferential-more">
          更多
        </view>
      </view>
      <view class="Selection-middle">
        <view class="Selection-middle-flex">
          <view class="left">
            <image src="../../static/card/card_image_03.png" mode="" class="image"></image>
          </view>
          <view class="right">
            <image src="../../static/card/card_image_05.png" mode="" class="image"></image>
          </view>
        </view>
      </view>
      <view class="Selection-flex">
        <view class="appreciation-flex-con">
          <view class="aa">
            <image src="../../static/card/vegetable.png" class="image"></image>
          </view>
          <view class="text">
            <view class="weight">
              来伊份
            </view>
            <view class="small">
              满40减16
            </view>
          </view>
        </view>
        <view class="appreciation-flex-con">
          <view class="aa">
            <image src="../../static/card/vegetable.png" class="image"></image>
          </view>
          <view class="text">
            <view class="weight">
              来伊份
            </view>
            <view class="small">
              满40减16
            </view>
          </view>
        </view>
        <view class="appreciation-flex-con">
          <view class="aa">
            <image src="../../static/card/vegetable.png" class="image"></image>
          </view>
          <view class="text">
            <view class="weight">
              来伊份
            </view>
            <view class="small">
              满40减16
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 用卡精选 -->
    <!-- 分期生活 -->
    <view class="life">
      <view class="preferential-top">
        <view class="preferential-title">
          分期生活
        </view>
        <view class="preferential-more">
          更多
        </view>
      </view>
      <view class="life-con">
        <view class="life-con-flex">
          <view class="life-flex-for" v-for="(item,i) in lifeList" :key="i">
            <view class="life-img">
              <image :src="item.img" mode="" class="image"></image>
            </view>
            <view class="text">
              <view class="weight">
                {{item.title}}
              </view>
              <view class="small">
                {{item.text}}
              </view>
            </view>
          </view>

        </view>

      </view>
    </view>
    <!-- 分期生活 -->
    <!-- 积分商城 -->
    <view class="integral">
      <view class="preferential-top">
        <view class="preferential-title">
          积分商城
        </view>
        <view class="preferential-more">
          更多
        </view>
      </view>
      <u-swiper imgMode="heightFix" :list="list2" indicator indicatorMode="line" circular height="150rpx"
        ass="swiper-two-con"></u-swiper>
    </view>
    <!-- 积分商城 -->

  </view>
</template>

<script>
  export default {
    data() {
      return {
        CityName: '泰安市',
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: ''
        },
        list1: [
          "/static/card/swiper_03.png",
          "/static/card/swiper_03.png",
          "/static/card/swiper_03.png",
        ],
        list2: [
          "/static/card/adv_03.png",
          "/static/card/bottom_adv_03.png",
          "/static/card/card_adv.png",
        ],
        list3: [
          "/static/card/discounts_one_03.png",
          "/static/card/discounts_one_03.png",
          "/static/card/discounts_one_03.png",
        ],
        list4: [
          "/static/card/value_logo_03.png",
          "/static/card/value_logo_03.png",
          "/static/card/value_logo_03.png",
        ],
        list: [{
            name: '/static/card/new_user.png',
            title: '新户享好礼'
          },
          {
            name: '/static/card/Card_equity.png',
            title: '卡权益'
          },
          {
            name: '/static/card/Card_discount.png',
            title: '卡优惠'
          },
          {
            name: '/static/card/recommend.png',
            title: '推荐有礼'
          },
          {
            name: '/static/card/more.png',
            title: '更多'
          },
        ],
        lifeList: [{
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: " 最高满减216"
          },
          {
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: " 最高满减216"
          }, {
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: " 最高满减216"
          }, {
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: " "
          }, {
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: ""
          }, {
            img: "/static/card/iphone.png",
            title: "小米手机",
            text: ""
          }
        ]
      }
    },
    // 获取定位方法
    getLocationInfo() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          let lat = res.latitude;
          let lng = res.longitude;
          let key =
            'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV'; //申请地址：https://lbs.qq.com/dev/console/application/mine
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
              '&key=' + key,
            method: "GET",
            success(ress) {
              let data = ress.data;
              let CityName = ress.data.result.address_component.city;
              _this.CityName = CityName
              uni.setStorage({
                key: 'City_Name',
                data: CityName
              });
            },
            fail() {
              uni.showToast({
                'title': '对不起，数据获取失败！',
                'icon': 'none'
              })
            }
          })
        },
        fail(res) {
          uni.showToast({
            'title': '对不起，获取位置失败！',
            'icon': 'none'
          })
        }
      })
    },

    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },
    },
    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },
    onLoad() {
      let _this = this;
      uni.$on('getCityName', function(res) {
        _this.CityName = res
      });
    },
    methods: {
      topsearch() {
        uni.navigateTo({
          url: "/pages/index/search"
        })
      },
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = '#000'
        }
      },
      get_Location() {
        uni.navigateTo({
          url: '/pages/Location/Location'
        })
      },
    }
  }
</script>

<style lang="scss">
  image {
    width: 100%;
    height: 100%;
  }

  #card {
    width: 100vw;
    // height: 100vh;
    background-color: #efefef;
    padding: 0 0 10rpx 0;

    // 头部
    .header {
      position: fixed;
      z-index: 999;
      left: 0;
      right: 0;
      top: 0;
      transition: all .5s;
      background: rgba(255, 255, 255, 0);

      .header-info {
        height: 88rpx;
        margin-top: 30rpx;

        .title {
          display: flex;
          width: 100vw;
          padding: 0 15rpx;
          box-sizing: border-box;
          text-align: center;
          color: #fff;
          transition: all .5s;

          .navleft {
            display: flex;
            width: 25vw;
            height: 50rpx;

            .navleft-img {
              padding: 10rpx 0;
              width: 20rpx;
              height: 30rpx;
            }

            .navposition {
              color: #000;
              font-weight: 520;
              font-size: 38rpx;
              padding-left: 8rpx;
              border: none;
            }
          }

          .navcent {
            width: 50vw;
            height: 50rpx;
          }

          .navright {
            display: flex;
            justify-content: space-around;
            width: 28vw;
            height: 50rpx;

            .navright-imgone {
              width: 50rpx;
              height: 50rpx;
            }

            .navright-imgtwo {
              width: 50rpx;
              height: 50rpx;
            }
          }
        }

      }
    }
  }

  // 头部

  // <!-- 第一个swiper -->
  .swiper-one {

    // padding-top: 140rpx;
    width: 90vw;
    margin: -80rpx auto 0;

    .swiper-one-con {
      width: 100%;
      background-color: #F8F8F8;
    }
  }

  // <!-- 第一个swiper -->
  // <!-- 第二个swiper -->
  .swiper-two {
    width: 90vw;
    // height: 5vh;
    // height: 100%;
    margin: 30rpx auto;
    // padding-bottom: 30rpx;
  }

  // <!-- 第二个swiper -->
  // 宫格
  .grid {
    width: 90vw;
    margin: 0 auto 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 15rpx 5rpx;

    .grid-text {
      // text-align: center;
      margin-top: 10rpx;
      font-size: 20rpx;
    }
  }

  // 宫格
  // <!-- 优惠活动 -->
  .preferential {
    width: 90vw;
    background-color: #fff;
    margin: auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .preferential-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .preferential-title {
        font-size: 35rpx;
        font-weight: bold;
      }

      .preferential-more {
        font-size: 28rpx;
        color: #ccc;
      }
    }

    .preferential-con {
      display: flex;
      justify-content: space-between;

      .preferential-left {
        width: 45%;
      }

      .preferential-right {
        width: 53%;

        .recommend {
          height: 50%;
          width: 100%;

          .img {
            width: 100%;
            height: 95%;
          }
        }

        .dragon {
          height: 50%;
          width: 100%;

          .img {
            width: 100%;
            height: 95%;
          }
        }


      }
    }
  }

  // <!-- 优惠活动 -->
  // <!-- 增值礼遇 -->
  .appreciation {
    width: 90vw;
    background-color: #fff;
    margin: 30rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .preferential-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .preferential-title {
        font-size: 35rpx;
        font-weight: bold;
      }

      .preferential-more {
        font-size: 28rpx;
        color: #ccc;
      }
    }

    .appreciation-con {
      .appreciation-swiper {
        margin-bottom: 20rpx;
      }

      .appreciation-flex {
        // border: 1px solid #000;
        width: 100%;
        // margin: auto;
        display: flex;
        justify-content: space-around;

        .appreciation-flex-con {
          // display: flex;
          // justify-content: \;
          width: 23%;
          margin-top: 15rpx;

          .image {
            width: 18vw;
            height: 14vw;
            // margin-bottom: 20rpx;
          }

          .text {
            margin-top: 10rpx;
          }
        }
      }
    }
  }

  // <!-- 增值礼遇 -->
  // <!-- 用卡精选 -->
  .Selection {
    width: 90vw;
    background-color: #fff;
    margin: 30rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .Selection-middle {
      .Selection-middle-flex {
        display: flex;

        // justify-content: space-between;
        .left {
          margin-right: 20rpx;
        }

        .image {
          width: 41vw;
          height: 15vh;
        }
      }
    }
  }

  .Selection-flex {
    margin-top: 30rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .appreciation-flex-con {
      width: 27%;
      margin-top: 15rpx;

      .image {
        width: 20vw;
        height: 15vw;
        // margin-bottom: 20rpx;
      }

      .text {
        margin-top: 10rpx;
        text-align: center;

        .weight {
          font-size: 30rpx;
          font-weight: bold;
        }

        .small {
          font-size: 20rpx;
          color: #666;
        }
      }
    }
  }

  .preferential-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .preferential-title {
      font-size: 35rpx;
      font-weight: bold;
    }

    .preferential-more {
      font-size: 28rpx;
      color: #ccc;
    }
  }

  // <!-- 用卡精选 -->
  // <!-- 分期生活 -->
  .life {
    width: 90vw;
    background-color: #fff;
    margin: 30rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .life-con {
      width: 100%;

      .life-con-flex {

        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // width: 27%;

        .life-flex-for {
          // width: 100%;
          // width: 90%;
          margin-bottom: 15rpx;
        }

        .image {
          width: 22vw;
          height: 20vw;
          // margin-bottom: 20rpx;
        }

        .text {
          margin-top: 10rpx;
          text-align: center;

          .weight {
            font-size: 30rpx;
            font-weight: bold;
          }

          .small {
            font-size: 20rpx;
            color: #666;
          }
        }
      }
    }
  }

  // <!-- 分期生活 -->
  // 积分商城
  .integral {
    width: 90vw;
    background-color: #fff;
    margin: 30rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
  }
</style>